<template>
    <div class="Search">
        <!-- 搜索盒 -->
        <div class="search_box">
            <van-search
                v-model="value"
                shape="round"
                background="#000000"
                placeholder="请输入搜索关键词"
                @search="onSearch"
            />
        </div>

        <!-- 搜索历史 -->
        <div class="searchHistory" v-show="searchHistoryData.length !== 0">
            <!-- 上盒 -->
            <div class="top">
                <!-- 左边 -->
                <div class="left">
                    <div class="p">搜索历史</div>
                    <van-icon name="delete-o" @click="delSearchHistory" />
                </div>
            </div>

            <!-- 历史区 -->
            <div class="searchHistory_box">
                <!-- 历史元素 -->
                <div
                    class="searchHistory_item"
                    v-for="(item, index) in searchHistoryData"
                    :key="index"
                    @click="clickSearch(item)"
                >
                    {{ item }}
                </div>
            </div>
        </div>

        <!-- 热搜榜 -->
        <div class="hotSearchList">
            <!-- 标题盒 -->
            <div class="tit_box">
                <!-- 标题 -->
                <div class="tit" @click="switchIsShow">热搜榜</div>
                <!-- 显示隐藏 -->
                <div class="isShow" @click="switchIsShow">
                    <van-icon :name="isShow ? 'arrow-up' : 'arrow-down'" />
                </div>
            </div>

            <!-- 热搜内容盒 -->
            <div class="hotSearchList_box" v-show="isShow">
                <!-- 热搜元素 -->
                <div
                    class="hotSearchList_item"
                    v-for="(item, index) in searchHotDetailData"
                    :key="index"
                >
                    <!-- 下标 -->
                    <div class="index">{{ index + 1 }}</div>
                    <!-- 内容盒 -->
                    <div class="p_box" @click="clickSearch(item.searchWord)">
                        <!-- 上盒 -->
                        <div class="top">
                            <!-- 关键词 -->
                            <div class="searchWord">{{ item.searchWord }}</div>
                            <!-- 分数 -->
                            <div class="score">{{ item.score }}</div>
                        </div>
                        <!-- 内容 -->
                        <div class="bottom">{{ item.content }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 搜索结果 -->
        <div class="searchKeywords" v-show="searchKeywordsData.length !== 0">
            <!-- 标题 -->
            <div class="tit">{{ nowKey }}</div>

            <!-- 歌单区 -->
            <div class="searchSongList_box">
                <!-- 歌单元素 -->
                <div
                    class="searchSongList_item"
                    v-for="(item, index) in searchSongList"
                    :key="index"
                >
                    <!-- 封面 -->
                    <div
                        class="coverImgUrl"
                        :style="{
                            backgroundImage: 'url(' + item.coverImgUrl + ')',
                        }"
                        @click="goSongSheet(item.id)"
                    ></div>
                    <!-- 歌单名 -->
                    <div class="name">{{ item.name }}</div>
                </div>
            </div>

            <!-- 单曲区 -->
            <div class="searchKeywords_box">
                <!-- 单曲元素 -->
                <Single
                    v-for="(item, index) in searchKeywordsData"
                    :key="index"
                    :item="item"
                    :index="index"
                />
            </div>
        </div>
    </div>
</template>

<script>
import { Dialog } from 'vant';
import Single from '../../components/Single.vue'
export default {
    name: "Search",
    components: { Single },
    data() {
        return {
            // 搜索关键词
            value: '',
            // 当前关键词
            nowKey: '',

            // 历史搜索
            searchHistoryData: [],

            // 热搜列表数据
            searchHotDetailData: [
                // {
                //     // 关键词
                //     searchWord: '',
                //     // 分数
                //     score: null,
                //     // 内容
                //     content: ''
                // }
            ],
            isShow: true,

            // 关键词搜索到的数据
            searchKeywordsData: [
                // {
                //     name:'',
                //     albumName: '',
                //     id: null,
                //     mv: null
                // }
            ],

            // 搜索到的歌单
            searchSongList: [
                // {
                //     coverImgUrl: '',
                //     name: '',
                //     id: null
                // }
            ],
        }
    },
    methods: {
        onSearch(val) {
            if (this.value.trim()) {
                if (val != this.nowKey) {
                    this.getCloudsearch(val.trim());
                }
            }
            else { this.value = "" };
        },

        // 切换热搜显示隐藏
        switchIsShow() { this.isShow = !this.isShow },

        // 点击关键词直接搜索
        clickSearch(val) {
            if (val === this.value.trim()) {
                return
            }
            this.value = val;
            this.getCloudsearch(val);
        },

        // 跳转到歌单路由
        goSongSheet(id) {
            this.$router.push({ name: "SongSheet", query: { id, type: 3 } });
        },

        // 删除历史记录
        delSearchHistory() {
            Dialog.confirm({
                message: '确定删除全部搜索历史？'
            }).then(() => {
                this.searchHistoryData = [];
                sessionStorage.setItem("searchHistoryData", JSON.stringify(this.searchHistoryData));
            }).catch(() => { });
        },


        // 请求热搜列表数据
        getSearchHotDetail() {
            this.axios({
                method: "GET",
                url: "/search/hot/detail"
            }).then((result) => {
                // console.log("🚀 ==> getSearchHotDetail ==> result", result);
                if (result.data.code === 200) {
                    result.data.data.forEach((v) => {
                        this.searchHotDetailData.push({
                            searchWord: v.searchWord,
                            score: v.score,
                            content: v.content,
                        });
                    });
                    // console.log("🚀 ==> getSearchHotDetail ==> this.searchHotDetailData", this.searchHotDetailData);
                };
            }).catch((err) => {
                console.log("🚀 ==> getSearchHotDetail ==> err", err);
            });
        },

        // 请求 关键词搜索 歌曲
        getCloudsearch(keywords) {
            this.axios({
                method: "GET",
                url: "/cloudsearch",
                params: { keywords }

            }).then((result) => {
                // console.log("🚀 ==> getSearch ==> result", result);
                if (result.data.code === 200) {

                    // 添加搜索记录
                    // 寻找相同的记录
                    for (let i = 0; i < this.searchHistoryData.length; i++) {
                        if (this.searchHistoryData[i] === keywords) {
                            this.searchHistoryData.splice(i, 1);
                            break
                        }
                    }
                    this.searchHistoryData.unshift(keywords);
                    if (this.searchHistoryData.length > 10) {
                        this.searchHistoryData.pop();
                    }
                    sessionStorage.setItem("searchHistoryData", JSON.stringify(this.searchHistoryData));


                    this.searchKeywordsData = [];
                    result.data.result.songs.forEach((v) => {
                        this.searchKeywordsData.push({
                            name: v.name,
                            albumName: v.ar[0].name,
                            id: v.id,
                            mv: v.mv
                        });
                    });

                    // console.log("🚀 ==> getCloudsearch ==> this.searchKeywordsData", this.searchKeywordsData);
                    this.isShow = false;
                    this.nowKey = keywords;
                    this.getSearchType1000(keywords);
                };
            }).catch((err) => {
                console.log("🚀 ==> getSearch ==> err", err);
            });
        },

        // 请求 搜索歌单
        getSearchType1000(keywords) {
            this.axios({
                method: "GET",
                url: "/cloudsearch",
                params: {
                    keywords,
                    type: 1000
                }
            }).then((result) => {
                // console.log("🚀 ==> getSearchType1000 ==> result", result);
                if (result.data.code === 200) {
                    this.searchSongList = [];
                    result.data.result.playlists.forEach((v) => {
                        if (this.searchSongList.length < 6) {
                            this.searchSongList.push({
                                coverImgUrl: v.coverImgUrl + '?param=140y140',
                                name: v.name,
                                id: v.id
                            });
                        };
                    });
                    console.log("🚀 ==> getSearchType1000 ==> this.searchSongList", this.searchSongList);
                }
            }).catch((err) => {
                console.log("🚀 ==> getSearchType1000 ==> err", err);
            });
        }
    },

    created() {
        this.getSearchHotDetail();
        // this.getCloudsearch();

        // 获取搜索记录
        this.searchHistoryData = JSON.parse(sessionStorage.getItem("searchHistoryData"));
        if (!this.searchHistoryData) {
            this.searchHistoryData = [];
        }
    },
}
</script>

<style lang="less" scoped>
.Search {
    max-height: 525px;
    overflow: scroll;
    padding-bottom: 20px;

    // 搜索盒
    /deep/.search_box {
        margin-top: 20px;
        padding: 0 5px;
        .van-icon-search {
            font-weight: 600;
            color: #f22c3a;
            font-size: 20px;
            margin-right: 5px;
        }

        .van-search__content {
            background-color: #000;
            border: 1px solid #7114e3;
            border-left-width: 1px;
        }

        input {
            color: rgba(255, 255, 255, 0.9);
        }
        input::-webkit-input-placeholder {
            color: #777;
        }
    }

    // 搜索历史
    .searchHistory {
        margin-top: 13px;
        padding: 0 15px;
        // 上盒
        .top {
            display: flex;
            align-items: center;

            // 左边
            .left {
                display: flex;

                .p {
                    letter-spacing: 2px;
                    font-weight: 600;
                    font-size: 16px;
                    background-image: linear-gradient(90deg, #43db8a, #2b97fc);
                    background-clip: text;
                    -webkit-background-clip: text;
                    color: transparent;
                    margin-right: 10px;
                }
                i {
                    margin-top: 1px;
                    font-size: 16px;
                    opacity: 0.7;
                }
            }
        }

        // 历史区
        .searchHistory_box {
            margin-top: 12px;
            display: flex;
            flex-wrap: wrap;
            // 历史元素
            .searchHistory_item {
                padding: 5px 13px;
                margin-left: 15px;

                margin-bottom: 10px;
                border: 2px solid #666;
                color: rgba(255, 255, 255, 0.9);
                border-radius: 15px;
            }
        }
    }

    // 热搜榜
    .hotSearchList {
        margin-top: 20px;
        padding: 0 15px;

        // 标题盒
        .tit_box {
            display: flex;
            justify-content: space-between;
            align-items: center;

            // 标题
            .tit {
                letter-spacing: 3px;
                font-weight: 600;
                font-size: 16px;
                background-image: linear-gradient(90deg, #43db8a, #2b97fc);
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
            }
            // 显示隐藏
            .isShow {
                margin-right: 15px;
                font-size: 18px;
                color: #fb9413;
            }
        }

        // 热搜内容盒
        .hotSearchList_box {
            margin-top: 20px;
            // 热搜元素
            .hotSearchList_item {
                display: flex;
                margin-bottom: 13px;

                &:nth-child(1) .index {
                    color: #f22c3a;
                    font-weight: 600;
                }
                &:nth-child(2) .index {
                    color: #a031a7;
                    font-weight: 600;
                }
                &:nth-child(3) .index {
                    color: #003cff;
                    font-weight: 600;
                }

                // 下标
                .index {
                    color: #999;
                    width: 24px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 16px;
                    margin-right: 15px;
                    flex-shrink: 0;
                }
                // 内容盒
                .p_box {
                    flex: 1;
                    // 上盒
                    .top {
                        display: flex;
                        align-items: end;
                        margin-bottom: 5px;
                        // 关键词
                        .searchWord {
                            font-weight: 600;
                            font-size: 15px;
                            opacity: 0.96;
                            margin-right: 15px;
                        }
                        // 分数
                        .score {
                            opacity: 0.4;
                        }
                    }
                    // 内容
                    .bottom {
                        max-width: 306px;
                        opacity: 0.75;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        word-break: break-all;
                    }
                }
            }
        }
    }

    // 搜索结果
    .searchKeywords {
        margin-top: 30px;

        // 标题
        .tit {
            margin-left: 15px;
            display: inline-block;
            letter-spacing: 2px;
            font-weight: 600;
            font-size: 18px;
            background-image: linear-gradient(90deg, #43db8a, #2b97fc);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }

        // 歌单区
        .searchSongList_box {
            margin-top: 20px;
            display: flex;
            flex-flow: wrap;
            justify-content: space-between;
            padding: 0 15px;

            // 歌单元素
            .searchSongList_item {
                width: 110px;
                margin-bottom: 20px;

                // 封面
                .coverImgUrl {
                    width: 110px;
                    height: 110px;
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: center center;
                    border-radius: 5px;
                    position: relative;

                    &::after {
                        content: '';
                        position: absolute;
                        border-radius: 5px;
                        top: 0;
                        bottom: 0;
                        right: 0;
                        left: 0;
                        background-image: url('../../assets/coverall.png');
                        background-size: 295px;
                        background-repeat: no-repeat;
                        background-position: 0 0;
                    }
                }
                // 歌单名
                .name {
                    margin-top: 8px;
                    width: 110px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    word-break: break-all;
                    text-align: center;
                }
            }
        }

        // 单曲区
        .searchKeywords_box {
            margin-top: 15px;
        }
    }
}
</style>